@import "~@/public-style.less";
.files-container{
    width: 100%;
    height: 100%;
    display: flex;
    // background-color: antiquewhite;
    .files-left{
        width: calc(100% - 260px);
        height: 100%;
        .files-header{
            width: 100%;
            height: 40px;
            // background-color: rgb(62, 71, 52);
            display: flex;
            align-items: center;
            padding-left: 10px;
            box-sizing: border-box;
            span:nth-of-type(1){
                color:#d2d2d2;
                font-size: 20px;
            }
            .add{
                width: 18px;
                height: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                background-color: #6eb40a;
                color: #d2d2d2;
                border-radius: 50%;
                padding: 3px;
                font-size: 14px !important;
                margin-left: 10px;
                margin-right: 3px;
                cursor: pointer;
            }
        }
        .files-content{
            width: 100%;
            height: calc(100% - 80px);
            display: flex;
            align-content: flex-start;
            flex-wrap: wrap;
            overflow-y: scroll;
            .files-null{
                width: 100%;
                height: 100%;
                padding:10%;
                box-sizing: border-box;
                span{
                    width: 100%;
                    text-align: center;
                    display: block;
                    font-size: 100px;
                    color:rgba(200, 200, 200,.5);
                }
                p{
                    width: 100%;
                    text-align: center;
                    display: block;
                    font-size: 24px;
                    color:rgba(200, 200, 200,.9);
                }
            }
            .scrollbar();
            .files-list{
                position: relative;
                height: 60px;
                width: 300px;
                border:1px solid @White-color;
                border-radius: 5px;
                display: flex;
                align-items: center;
                padding-left: 20px;
                box-sizing: border-box;
                margin:5px 0px 0px 5px;
                background-color: rgba(220,220,220,.1);
                cursor: pointer;
                .icon{
                    font-size: 30px;
                    &.icon-wendang{
                        color:rgba(108, 168, 132, 0.6);
                    }
                    &.icon-liuchengtu{
                        color:rgba(153, 104, 173, 0.6);
                    }
                    &.icon-biaoge{
                        color:rgba(115, 123, 174, 0.6);
                    }
                }
                .name{
                    margin-left: 15px;
                    color: @White-theme-title-color;
                }
                .tool{
                    position: absolute;
                    right:20px;
                    width: 20px;
                    height: 20px;
                    border:1px solid @White-theme-title-color;
                    color:@White-color;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    display: none;
                    cursor: pointer;
                }
                &:hover{
                    background-color: rgba(220,220,220,.2);
                    .tool{
                        display: flex;
                        color:rgba(200,200,200,1);
                        background-color:@foreground-color;
                    }
                }
            }
        }
        .files-footer{
            display: flex;
            align-items: center;
            justify-content: center;
            .el-pagination{
                .btn-prev{

                }
                .el-pager{
                    li{
                      
                    }
                }
                .btn-next{

                }
            }
        }
    }
    .files-right{
        width:260px;
        height: 100%;
        background-color: rgba(200, 200, 200,.1);
        border:1px solid rgba(200,200,200,.2);
        box-sizing: border-box;
        border-radius: 5px;
        overflow: hidden;
        span{
            background-color: rgb(253, 253, 253);
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            padding-left:10px;
            box-sizing: border-box;
        }
        ul{
            overflow-y: scroll;
            width: 100%;
            height: calc(100% - 40px);
            .scrollbar();
            li{
                width: 100%;
                height: 30px;
                color:rgba(200,200,200,.7);
                display: flex;
                align-items: center;
                padding-left:15px;
                box-sizing: border-box;
                cursor: pointer;
                &.active{
                    background-color: rgba(200,200,200,.2);
                }
                &:hover{
                    background-color: rgba(200,200,200,.2);
                }
            }
        }
    }
}